<script>
  $(document).ready(function() {
      $('input[type=radio][name=region]').change(function() {
          var server_id = $(this).data("server-id");
          $("#server-" + server_id).siblings("div").fadeOut("fast").promise().done(function() {
            $("#server-" + server_id).fadeIn();
          });
      });
  });
</script>

<div id="miner-config" class="panel panel-default{% if active_page != "config" %} collapse{% endif %}">
  <div class="panel-heading">{{ _("Step 1. Pick the region nearest to you") }}</div>
  <div class="panel-body">
    <div class="row">
      <div class="col-sm-11 col-sm-offset-1">
        <form class="form-inline" role="form">
          {% for loc in locations.itervalues() %}
          <div class="col-sm-4">
            <label class="radio-inline" style="width:100%;">
              <input type="radio" name="region" class="form-control server-region" data-server-id="{{ loc }}" value="{{ loc.address }}">
              <h4><img src="{{ config['assets_address'] | safe }}{{ loc.country_flag }}"
                       style="width:25px;" class="too-damn-bright"> &nbsp;{{ loc.location }}</h4>
                  <b>{{ _("URL") }}</b>: {{ loc.address }}
            </label>
          </div>
          {% endfor %}
        </form>
      </div>
    </div>
  </div>

  <div class="panel-heading">{{ _("Step 2. Pick a port") }}
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-sm-11 col-sm-offset-1">
        <form class="form-horizontal" role="form">
          <div class="col-sm-5 col-sm-offset-2 no-padding" id="server-0">
            {{ _("Pick a server to view available ports") }}
          </div>
        {% for loc in locations.itervalues() %}
          <div class="col-sm-12 no-padding default-hide" id="server-{{ loc }}">
          <h3><img src="{{ config['assets_address'] | safe }}{{ loc.country_flag }}"
                   style="width:25px;" class="too-damn-bright"> &nbsp;{{ loc.location_acronym }} {{ _("Ports") }}</h3>
          {% set algos = loc.stratums_by_algo() %}
          {% for algo, algo_list in algos.iteritems() %}
            <div class="col-sm-4">
              <div class="col-sm-12 no-padding">
                <h4>{{ algo }} {{ _("ports:") }}</h4>
              </div>
              {% for stratum in algo_list if stratum.display != False %}
              <div class="radio">
                <label>
                  <div class="col-sm-12 no-padding">
                    <input type="radio" name="port" class="stratum-ports" value="{{ stratum.port }}">
                    <b>{{ stratum.chain.title }}:</b>
                    <ul>
                      <li>{{ _("Port:") }} {{ stratum.port }}</li>
                      <li>{{ _("Payout Method:") }} {{ stratum.chain.type }}</li>
                      <li>{{ _("Diff:") }} {{ stratum.diff }}</li>
                      <li>{{ stratum.chain.hr_fee_perc }}% {{ _("fee") }}</li>
                      <li>{{ _("Past 4d Profit:") }} {{ past_chain_profit[stratum.chain.id] }} {{ _("BTC/MH") }}</li>
                    </ul>
                  </div>
                </label>
              </div>
              {% endfor %}
            </div>
          {% endfor %}
        </div>
        {% endfor %}
        </form>
      </div>
    </div>
  </div>

  <div class="panel-heading">{{ _("Step 3. Set a username") }}</div>
  <div class="panel-body">
    <div class="row">
      <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="availCurr" class="col-sm-2 col-sm-offset-2 control-label">{{ _("Payout currency:") }}</label>
            <div class="col-sm-5">
              <select class="form-control" id="availCurr" style="padding:8px 8px;">
                {% for curr in payout_currencies %}
                  <option value="{{ curr }}" id="usr-{{ curr }}"{% if curr.key == default_curr %} selected{% endif %}>{{ curr }}</option>
                {% endfor %}
              </select>
              <span class="help-block help-text">
                {{ _("Pick a currency that we pay out in") }}</span>
            </div>
          </div>
          <div class="form-group">
            <label for="configUserAddr" class="col-sm-2 col-sm-offset-2 control-label">{{ _("Payout address:") }}</label>
            <div class="col-sm-5">
              <input type="text" class="form-control user-address-field" id="configUserAddr" name="{{ default_curr }}">
              <span class="help-block help-text">
                {{ _("Insert a valid") }} <span class="chosen-currency">{{ default_curr }}</span> {{ _("address") }}</span>
              <span class="help-block checking-address default-hide">
                <i class='fa fa-spinner fa-spin'></i> {{ _("Checking address validity") }}</span>
              <span class="help-block invalid-address default-hide">
                <i class='fa fa-exclamation-triangle'></i> {{ _("Invalid") }} <span class="address-currency"></span> {{ _("address") }}</span>
              <span class="help-block error default-hide">
                <i class='fa fa-exclamation-triangle'></i> {{ _("The server had an error attempting to validate!") }}</span>
              <span class="help-block valid-address default-hide">
                <i class='fa fa-check'></i> {{ _("Valid") }} <span class="address-currency"></span> {{ _("address") }}</span>
            </div>
          </div>
      </form>
    </div>
  </div>

  <div class="panel-heading">{{ _("Step 4. Configure your first worker (optional settings)") }}</div>
  <div class="panel-body">
    <form class="form-horizontal" role="form">

      <div class="row">
        <div class="form-group">
          <label for="donateAmount" class="col-sm-2 col-sm-offset-2 control-label">{{ _("Workername:") }}</label>
          <div class="col-sm-5">
            <input type="text" class="form-control" id="workername" name="workername" value="worker1">
            <span class="help-block" style="margin-bottom:0px;">{{ _("Alphanumeric characters only") }}</span>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="form-group">
          <label for="donateAmount" class="col-sm-2 col-sm-offset-2 control-label">{{ _("Starting difficulty:") }}</label>
          <div class="col-sm-5">
            <input type="text" class="form-control" id="mining-diff" name="mining-diff">
            <span class="help-block invalid-address" style="margin-bottom:0px;">
              <i class="fa fa-exclamation-triangle"></i> {{ _("Only 'sticks' on fixed diff ports!") }}
            </span>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div class="panel-heading">{{ _("Step 5. Configure your miner") }}</div>
  <div class="panel-body">
    <div class="row">
      <div class="col-sm-10 col-sm-offset-1">
        <div class="well well-lg" style="min-height:130px;background-color:#212F3D;">
          <b>{{ _("URL:") }} </b><span class="stratum-url"><span style="color:red">{{ _("Select region above") }}</span></span><br>
          <b>{{ _("Port:") }}</b> <span class="stratum-port"><span style="color:red">{{ _("Select port above") }}</span></span><br>
          <b>{{ _("Username:") }} </b><span class="mining-username"><span style="color:red">{{ _("Fill in username above") }}</span></span><span class="mining-workername">.worker1</span><br>
          <b>{{ _("Password:") }} </b><span class="mining-diff">x</span><br>
          <b>{{ _("Commandline example:") }}</b> ./sgminer
          -o stratum+tcp://<span class="stratum-url"><span style="color:red">{{ _("Select region above") }}</span></span>:<span class="stratum-port"><span style="color:red">{{ _("Select port above") }}</span></span>
          -u <span class="mining-username"><span style="color:red">{{ _("Fill in username above") }}</span></span><span class="mining-workername">.worker1</span>
          -p <span class="mining-diff">x</span> -I 13
        </div>
      </div>
    </div>
  </div>

  <div class="panel-heading">{{ _("Step 6. Make sure your hashrate shows up") }}</div>
  <div class="panel-body">
    <div class="row">
      <div class="col-sm-11 col-sm-offset-1">
        <p><b>{{ _("Stats link") }}</b>:
          <span id="stats-link" data-url="{{ config['site_url'] }}/stats">
            {{ config['site_url'] }}/stats/<span class="mining-username">[Your Payout Address]</span>
          </span>
        </p>
        <p>{{ _("After a few minutes of mining your stats page should be showing a
          graph and hashrate for your miners. If it isn't, double check your
          configs.") }}</p>
      </div>
    </div>
  </div>

  <div class="panel-heading">{{ _("Step 7. Edit your account settings") }}</div>
  <div class="panel-body">
    <div class="row">
      <div class="col-sm-11 col-sm-offset-1">
        <p><b>{{ _("Settings link") }}</b>:
          <span id="settings-link" data-url="{{ config['site_url'] }}/settings">
            {{ config['site_url'] }}/settings/<span class="mining-username">[Your Payout Address]</span>
          </span>
        </p>
        {{ _("More configuration of your account is available on your account
          settings page. Including:") }}
        <ul>
          <li>{{ _("Setting additional payout addresses (this is required in order to collect some merged mining rewards!)") }}</li>
          <li>{{ _("Add a donation to the pool") }}</li>
          <li>{{ _("Enable privacy (hides your address on the leaderboard)") }}</li>
        </ul>
        <span style="display:none;">Visit the <a id="settings-link" href="#">settings page</a> for your account to get started / learn more.</span>
      </div>
    </div>
  </div>
</div>
